<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HealthHub - 健康计划</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <!-- 引入一些字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 主容器 - 模拟手机屏幕 -->
    <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden pb-20">
        <!-- 顶部状态栏 -->
        <div class="bg-primary text-white p-4 flex justify-between items-center">
            <div class="flex items-center">
                <span class="font-bold text-xl">健康计划</span>
            </div>
            <div class="flex items-center space-x-3">
                <i class="fas fa-bell"></i>
                <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&h=100" 
                         alt="用户头像" class="w-full h-full object-cover">
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="p-4">
            <!-- 目标进度概览 -->
            <div class="bg-gradient-to-r from-primary to-indigo-600 rounded-xl p-4 text-white mb-6 shadow-md">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <h3 class="font-medium">减重计划进度</h3>
                        <p class="text-3xl font-bold mt-1">68%</p>
                    </div>
                    <div class="w-20 h-20 relative">
                        <!-- 圆形进度条 -->
                        <svg class="w-full h-full" viewBox="0 0 36 36">
                            <path class="stroke-current text-white/30" stroke-width="3" fill="none" 
                                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                            <path class="stroke-current text-white" stroke-width="3" fill="none" stroke-dasharray="68, 100"
                                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <i class="fas fa-fire text-yellow-300 text-xl"></i>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-2 text-center">
                    <div class="bg-white/10 rounded-lg p-2">
                        <p class="text-sm opacity-90">当前</p>
                        <p class="font-bold">68.5kg</p>
                    </div>
                    <div class="bg-white/10 rounded-lg p-2">
                        <p class="text-sm opacity-90">目标</p>
                        <p class="font-bold">65kg</p>
                    </div>
                    <div class="bg-white/10 rounded-lg p-2">
                        <p class="text-sm opacity-90">剩余</p>
                        <p class="font-bold">3.5kg</p>
                    </div>
                </div>
                <div class="mt-3 text-sm opacity-90">
                    <p>预计完成日期: 2024年6月30日</p>
                    <p class="mt-1">健康减重速度: 每周0.5kg</p>
                </div>
            </div>

            <!-- 今日任务完成情况 -->
            <h2 class="text-lg font-semibold mb-3">今日计划 (3/5)</h2>
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-6">
                <!-- 任务1 -->
                <div class="p-4 border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="w-5 h-5 bg-green-100 rounded-md flex items-center justify-center mr-3">
                            <i class="fas fa-check text-green-500 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">30分钟核心力量训练</h4>
                            <div class="flex items-center text-sm text-gray-500 mt-1">
                                <i class="fas fa-clock text-xs mr-1"></i>
                                <span>09:00 - 09:30</span>
                                <span class="mx-2">|</span>
                                <span class="text-green-500">已完成</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 任务2 -->
                <div class="p-4 border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="w-5 h-5 bg-green-100 rounded-md flex items-center justify-center mr-3">
                            <i class="fas fa-check text-green-500 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">健康午餐</h4>
                            <div class="flex items-center text-sm text-gray-500 mt-1">
                                <i class="fas fa-clock text-xs mr-1"></i>
                                <span>12:00 - 13:00</span>
                                <span class="mx-2">|</span>
                                <span class="text-green-500">已完成</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 任务3 -->
                <div class="p-4 border-b border-gray-100 bg-blue-50">
                    <div class="flex items-center">
                        <div class="w-5 h-5 bg-blue-100 rounded-md flex items-center justify-center mr-3">
                            <i class="fas fa-play text-blue-500 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">喝水提醒 (1.2/2.0L)</h4>
                            <div class="flex items-center text-sm text-gray-500 mt-1">
                                <i class="fas fa-clock text-xs mr-1"></i>
                                <span>全天</span>
                                <span class="mx-2">|</span>
                                <span class="text-blue-500">进行中</span>
                            </div>
                            <div class="w-full bg-blue-100 rounded-full h-1.5 mt-2">
                                <div class="bg-blue-500 h-1.5 rounded-full" style="width: 60%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 任务4 -->
                <div class="p-4 border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="w-5 h-5 bg-gray-100 rounded-md flex items-center justify-center mr-3">
                            <i class="fas fa-hourglass text-gray-400 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">晚间散步5公里</h4>
                            <div class="flex items-center text-sm text-gray-500 mt-1">
                                <i class="fas fa-clock text-xs mr-1"></i>
                                <span>18:30 - 19:30</span>
                                <span class="mx-2">|</span>
                                <span class="text-gray-500">未开始</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 任务5 -->
                <div class="p-4">
                    <div class="flex items-center">
                        <div class="w-5 h-5 bg-gray-100 rounded-md flex items-center justify-center mr-3">
                            <i class="fas fa-hourglass text-gray-400 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">睡前冥想15分钟</h4>
                            <div class="flex items-center text-sm text-gray-500 mt-1">
                                <i class="fas fa-clock text-xs mr-1"></i>
                                <span>22:00 - 22:15</span>
                                <span class="mx-2">|</span>
                                <span class="text-gray-500">未开始</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 我的计划 -->
            <h2 class="text-lg font-semibold mb-3">我的健康计划</h2>
            
            <!-- 减重计划 -->
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-4">
                <div class="p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-weight-scale text-indigo-500"></i>
                        </div>
                        <div>
                            <h3 class="font-medium">健康减重计划</h3>
                            <p class="text-sm text-gray-500">目标: 减轻5kg体重</p>
                        </div>
                    </div>
                    <div class="flex flex-col items-end">
                        <span class="text-sm font-medium text-indigo-500">进行中</span>
                        <span class="text-xs text-gray-400 mt-1">剩余42天</span>
                    </div>
                </div>
                <div class="px-4 pb-4">
                    <div class="w-full bg-gray-100 rounded-full h-1.5">
                        <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 68%"></div>
                    </div>
                </div>
            </div>
            
            <!-- 跑步计划 -->
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-4">
                <div class="p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-person-running text-blue-500"></i>
                        </div>
                        <div>
                            <h3 class="font-medium">5公里跑步计划</h3>
                            <p class="text-sm text-gray-500">目标: 30分钟内完成5公里</p>
                        </div>
                    </div>
                    <div class="flex flex-col items-end">
                        <span class="text-sm font-medium text-blue-500">进行中</span>
                        <span class="text-xs text-gray-400 mt-1">第3周/8周</span>
                    </div>
                </div>
                <div class="px-4 pb-4">
                    <div class="w-full bg-gray-100 rounded-full h-1.5">
                        <div class="bg-blue-500 h-1.5 rounded-full" style="width: 35%"></div>
                    </div>
                </div>
            </div>
            
            <!-- 睡眠改善计划 -->
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mb-6">
                <div class="p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-moon text-purple-500"></i>
                        </div>
                        <div>
                            <h3 class="font-medium">睡眠质量改善</h3>
                            <p class="text-sm text-gray-500">目标: 每晚8小时高质量睡眠</p>
                        </div>
                    </div>
                    <div class="flex flex-col items-end">
                        <span class="text-sm font-medium text-purple-500">进行中</span>
                        <span class="text-xs text-gray-400 mt-1">第2周/4周</span>
                    </div>
                </div>
                <div class="px-4 pb-4">
                    <div class="w-full bg-gray-100 rounded-full h-1.5">
                        <div class="bg-purple-500 h-1.5 rounded-full" style="width: 50%"></div>
                    </div>
                </div>
            </div>

            <!-- 推荐计划 -->
            <h2 class="text-lg font-semibold mb-3">为您推荐</h2>
            <div class="grid grid-cols-1 gap-4 mb-8">
                <!-- 推荐计划1 -->
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <div class="h-32 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1579126038374-6064e9370f0f?auto=format&fit=crop&w=800" 
                             alt="健康饮食" class="w-full h-full object-cover">
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-medium">30天健康饮食计划</h3>
                            <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-600">营养</span>
                        </div>
                        <p class="text-sm text-gray-500 mb-3">通过科学合理的饮食搭配，改善营养摄入结构，提高免疫力</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="flex -space-x-2">
                                    <div class="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                                        <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=100" alt="用户头像" class="w-full h-full object-cover">
                                    </div>
                                    <div class="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                                        <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=100" alt="用户头像" class="w-full h-full object-cover">
                                    </div>
                                    <div class="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                                        <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&w=100" alt="用户头像" class="w-full h-full object-cover">
                                    </div>
                                </div>
                                <span class="text-xs text-gray-500 ml-1">2.5k人参与</span>
                            </div>
                            <button class="text-xs bg-primary text-white px-3 py-1.5 rounded-full">加入计划</button>
                        </div>
                    </div>
                </div>

                <!-- 推荐计划2 -->
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <div class="h-32 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?auto=format&fit=crop&w=800" 
                             alt="冥想训练" class="w-full h-full object-cover">
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-medium">21天冥想挑战</h3>
                            <span class="text-xs px-2 py-1 rounded-full bg-purple-100 text-purple-600">心理</span>
                        </div>
                        <p class="text-sm text-gray-500 mb-3">每天15分钟，掌握科学的冥想方法，缓解压力，提高专注力</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="flex -space-x-2">
                                    <div class="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                                        <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=100" alt="用户头像" class="w-full h-full object-cover">
                                    </div>
                                    <div class="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                                        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100" alt="用户头像" class="w-full h-full object-cover">
                                    </div>
                                    <div class="w-6 h-6 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100" alt="用户头像" class="w-full h-full object-cover">
                                    </div>
                                </div>
                                <span class="text-xs text-gray-500 ml-1">1.8k人参与</span>
                            </div>
                            <button class="text-xs bg-primary text-white px-3 py-1.5 rounded-full">加入计划</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 px-6 py-2">
            <div class="flex justify-between items-center">
                <a href="health_app_home.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="health_app_data.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-chart-line text-xl"></i>
                    <span class="text-xs mt-1">数据</span>
                </a>
                <div class="relative -mt-5">
                    <button class="w-14 h-14 rounded-full bg-gradient-to-r from-primary to-indigo-600 flex items-center justify-center shadow-lg text-white">
                        <i class="fas fa-plus text-xl"></i>
                    </button>
                </div>
                <a href="#" class="flex flex-col items-center text-primary">
                    <i class="fas fa-list-check text-xl"></i>
                    <span class="text-xs mt-1">计划</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </div>
</body>
</html> 